//区域框
const area = document.querySelectorAll('.js_tags_area .tag__item')
//版本框
const version = document.querySelectorAll('.js_tags_version .tag__item')
//全部MV框
const part_detail__tit = document.querySelector('.part_detail__hd .part_detail__tit')  
const part_detail__tit2 = document.querySelector('.part_detail__hd .part_detail__tit2')
//获取导航栏
const mod_tag = document.querySelector('.mod_tag')
//获取所有的li标签
const lis = document.querySelectorAll('.mv_list__list li')
//获取最新最热选项框
const part_switch = document.querySelectorAll('.part_switch__item')
// console.log(part_switch);

//获取最新选项框
const part_switch__itemleft = document.querySelector('.part_switch__item--left')
//获取最热选项框
const part_switch__itemright = document.querySelector('.part_switch__item--right')
// console.log(lis);
let arr = [
    {url:'./img/mv01.jpg',h3:'Enrico Sangiuliano DJ set At Creamfields 2019 (Beatport Live)',p:'Enrico Sangiuliano',span1:'2.2万',span2:'2029-08-25'},
    {url:'./img/mv02.jpg',h3:'Big Payment (Official Audio)',p:'AAP Deno',span1:'29',span2:'2022-12-04'},
    {url:'./img/mv03.jpg',h3:' AQUELE EX (Ao Vivo)',p:'Luan Santana',span1:'93',span2:'2022-12-03'},
    {url:'./img/mv04.jpg',h3:' Céline Dion',p:'Luan Santana',span1:'12',span2:'2022-12-02'},
    {url:'./img/mv01.jpg',h3:'Enrico Sangiuliano DJ set At Creamfields 2019 (Beatport Live)',p:'Enrico Sangiuliano',span1:'2.2万',span2:'2029-08-25'},
    {url:'./img/mv02.jpg',h3:'Big Payment (Official Audio)',p:'AAP Deno',span1:'29',span2:'2022-12-04'},
    {url:'./img/mv03.jpg',h3:' AQUELE EX (Ao Vivo)',p:'Luan Santana',span1:'93',span2:'2022-12-03'},
    {url:'./img/mv04.jpg',h3:' Céline Dion',p:'Luan Santana',span1:'12',span2:'2022-12-02'},
    {url:'./img/mv01.jpg',h3:'Enrico Sangiuliano DJ set At Creamfields 2019 (Beatport Live)',p:'Enrico Sangiuliano',span1:'2.2万',span2:'2029-08-25'},
    {url:'./img/mv02.jpg',h3:'Big Payment (Official Audio)',p:'AAP Deno',span1:'29',span2:'2022-12-04'},
    {url:'./img/mv03.jpg',h3:' AQUELE EX (Ao Vivo)',p:'Luan Santana',span1:'93',span2:'2022-12-03'},
    {url:'./img/mv04.jpg',h3:' Céline Dion',p:'Luan Santana',span1:'12',span2:'2022-12-02'},
    
]
//生成随机数函数
function getRnd(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min
}
// console.log(area);
//区域
for(let i = 0;i<area.length;i++){
    //给每一区域模块注册点击事件
    area[i].addEventListener('click',function(){
        //去掉上一个高亮效果
        document.querySelector('.js_tags_area .tag__item--select').classList.remove('tag__item--select')
        //设置高亮
        area[i].classList.add('tag__item--select')
        // console.log(area[i].innerHTML);
        part_detail__tit.innerHTML = area[i].innerHTML
        if(i === 0){
            part_detail__tit.innerHTML = '全部MV'
        }
    })
}
//点击 区域/版本 底下的内容项进行随机显示
mod_tag.addEventListener('click',function(e){
    if(e.target.tagName ==='A'){
        for(let i =0;i<lis.length;i++){
            let val = getRnd(0,arr.length)
            lis[i].innerHTML = `
            <a href="#" class="imagea">
            <img  src="${arr[val].url}" alt="">
            <!-- 播放按钮 -->
            <i></i>
        </a>
        <h3><a href="#">
        ${arr[val].h3}</a>
        </h3>
        <p><a href="#">${arr[val].p}</a></p>
        <div class="info">
            <!-- 播放小图标 -->
            <i></i>
            <span>${arr[val].span1}/span>
            <span>${arr[val].span2}</span>
        </div>
                        `
                        // console.log(area[i].innerHTML);
        }
    }
})


//版本
for(let j =0;j<version.length;j++){
    version[j].addEventListener('click',function(){
        //去掉上一个高亮效果
        document.querySelector('.js_tags_version .tag__item--select').classList.remove('tag__item--select')
        //设置高亮
        version[j].classList.add('tag__item--select')
        part_detail__tit2.innerHTML = version[j].innerHTML
        if(j === 0){
            part_detail__tit2.innerHTML = ''
        }
    })
}

//最新最热选择框
for(let i =0;i<part_switch.length;i++){
    part_switch[i].addEventListener('click',function(){
        document.querySelector('.part_switch__item--select').classList.remove('part_switch__item--select')
        part_switch[i].classList.add('part_switch__item--select')
    })
 
   
}
//最新选择框点击后让页面数据变化
part_switch__itemleft.addEventListener('click',function(){
   for(let i =0;i<lis.length;i++){
    let val = getRnd(0, arr.length)
    // console.log(arr[val].url);
    lis[i].innerHTML = `
    <a href="#" class="imagea">
    <img  src="${arr[val].url}" alt="">
    <!-- 播放按钮 -->
    <i></i>
</a>
<h3><a href="#">
${arr[val].h3}</a>
</h3>
<p><a href="#">${arr[val].p}</a></p>
<div class="info">
    <!-- 播放小图标 -->
    <i></i>
    <span>${arr[val].span1}/span>
    <span>${arr[val].span2}</span>
</div>
    `
   }  

})

part_switch__itemleft.addEventListener('click',function(){

})
//最热选择框点击让页面数据变化
part_switch__itemright .addEventListener('click',function(){
    for(let i =0;i<lis.length;i++){
     let val = getRnd(0, arr.length)
     lis[i].innerHTML = `
     <a href="#" class="imagea">
    <img  src="${arr[val].url}" alt="">
    <!-- 播放按钮 -->
    <i></i>
</a>
<h3><a href="#">
${arr[val].h3}</a>
</h3>
<p><a href="#">${arr[val].p}</a></p>
<div class="info">
    <!-- 播放小图标 -->
    <i></i>
    <span>${arr[val].span1}/span>
    <span>${arr[val].span2}</span>
</div>
     `
    }  
 })




 let tiaozhuan=document.querySelectorAll(".imagea")
 // console.log(tiaozhuan);
 for(let i=0;i<tiaozhuan.length;i++){
     tiaozhuan[i].addEventListener("click",()=>{
         window.location.href="../代普/musicPlay.html"
     })
 }